<template>
    <div class="main">
        <Header></Header>
        <div>
            <div @click="back" class="item bak">
                <el-icon class="icon-i"><ArrowLeftBold /></el-icon>
            </div>
            <div class="item">
                <el-icon class="icon-i"><Microphone /></el-icon><br>
                <span>麦克风</span>
            </div>
            <div class="item">
                <el-icon class="icon-i"><Service/></el-icon><br>
                <span>扩音/耳机</span>
            </div>
            <div class="item">
                <div class="startBtn" @click="startFn">
                    <p>
                        开始
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
    import Header from './common/header.vue'
    import {ref} from 'vue'
    import { useRouter } from 'vue-router';
    const {ipcRenderer }  = window.require('electron')
    const outPah = ref('');
    const router = useRouter()
    function back(){
        router.back();
    }
    function startFn(){
        ipcRenderer.send('start:record');
    }
</script>
<style>
    * {
        margin: 0;
        margin: 0;
    }
</style>
<style scoped>
    .main {
        height: 100vh;
        width: 100%;
        background: rgba(11, 9, 9,.9);
    }
    .item {
        width: 30%;
        width:30%;
        float: left;
        color: #ccc;
        font-size: 18px;
        cursor: pointer;
    }
    
    .item:hover {
        color: rgb(111, 111, 243);
    }
    .item .icon-i {
        font-size: 40px;
        font-weight: 700;
        padding-top: 60px;
    }
    .startBtn {
        cursor: pointer;
        width: 100px;
        height: 100px;
        text-align: center;
        background: rgba(253, 206, 214, 0.7);
        border-radius: 100px 100px 100px 100px;
        border: 1px solid pink;
        margin-top: 40px;
        margin-left: 40px;
    }
    .startBtn p {
        width: 86px;
        height: 86px;
        line-height: 80px;
        background: red;
        border-radius: 100px 100px 100px 100px;
        margin: 7px auto;
        color: #fff;
        font-size: 28px;
        font-weight: 700;
    }
    .item.bak {
        width: 20px;
    }
</style>

